<template>
  <div id="wrap">
    <h1>Reactive包装注意事项补充</h1>
    <button @click="changeUser">改变user的值,看看是否会丢失响应式</button>
    <ul>
      <li>user:{{ user.name }}---{{ user.sex }}---{{ user.age }}</li>
      <li v-for="(item, index) in user.hobby" :key="index">{{ item }}</li>
    </ul>
    <hr />
    <!-- 解构完之后变成未包装的变量 -->
    <button @click="changeUserJie">改变user的值,看看是否会丢失响应式</button>
    <ul>
      <li>{{ name }}</li>
      <li>{{ sex }}</li>
      <li>{{ age }}</li>
      <li v-for="(item, index) in hobby" :key="index">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="(item, index) in CopyHobby" :key="index">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="(item, index) in reactCopyHobby" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo19',
};
</script>

<script lang="ts" setup>
import { reactive } from 'vue';
//对解构操作不友好：当我们将响应式对象的`原始类型`属性解构为本地变量时，将丢失响应性连接,引用类型保留响应式
const user = reactive({
  name: '蔡徐坤',
  sex: 'nan',
  age: 18,
  hobby: ['唱', '跳', 'rap', '打篮球', '练习时常两年半'],
});
const changeUser = () => {
  user.age = 88;
  user.hobby.push('你干嘛');
};

//解构完之后变成未包装的变量
const { name, sex, age, hobby } = user;
const CopyHobby = JSON.parse(JSON.stringify(hobby)); // 深拷贝
const reactCopyHobby = reactive(JSON.parse(JSON.stringify(hobby))); // 深拷贝并且从新包装对象
function changeUserJie() {
  // 原始类型丢失响应式
  // name = 88

  // 引用类型不会丢失响应性，但是引用的还是原来的地址，会干扰结构之前的对象属性
  hobby.push('你干嘛~~~')

  // 深copy不会改变响应式状态
  CopyHobby.push('你干嘛~~~')

  // 深copy并且从新包装的对象
  reactCopyHobby.push('你干嘛~~~');
}
</script>

<style lang="scss"></style>
